<template>
    <div>
        <uni-popup ref="popup" type="bottom" :safe-area="false" @touchmove.stop.prevent="clearFunc">
            <view class="content">
                <view class="headBox">
                    <text></text>
                    <view class="close" @click.stop="closeBox">
                        <text class="iconfont">&#xeca0;</text>
                    </view>
                </view>

                <!--  -->
                <view class="popup-body">
                    <div class="goods_info">
                        <div class="imgbox" @click="goViewImage">
                            <img :src="selectOne.fileIdPic" mode="aspectFit" />
                        </div>
                        <div class="r-box">
                            <div class="price-col">
                                <text class="">￥</text>
                                <text class="big b">{{ selectOne.salePrice }}</text>
                            </div>

                            <div class="name">
                                <span class="col-hui mr10">已选</span>
                                <span class="">{{ selectOne.name }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="tit-head">
                        <span class="b">选择商品单品：</span>
                        <div class="r-box"></div>
                    </div>

                    <div class="style-list">
                        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
                            <div v-for="(item, idx) in styleArr" :key="idx" class="style-content">
                                <div class="item" :class="{ active: idx == activeIdx }" @click="switchGoods(idx)">
                                    <div class="item-top col-333">
                                        <div class="imgBox">
                                            <img :src="item.fileIdPic" alt="" />
                                        </div>
                                        <div class="desc ml10">
                                            <span>{{ item.name }}</span>
                                            <span class="f12 ml5 price">￥{{ item.salePrice }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </scroll-view>
                    </div>
                    <div class="tit-head flex n" v-if="mode != 'sure'">
                        <span class="b">数量：</span>
                        <div class="r-box fr">
                            <Count :numVal.sync="countNum" @change="productChange" size="big" :limit="1" />
                        </div>
                    </div>
                </view>

                <div class="foot-btn">
                    <div class="fixed-bottom">
                        <div class="btn-box">
                            <div class="like-btn bug" v-if="mode == 'buy'" @click="handleBtnFunc('buy')">
                                <span>直接购买</span>
                            </div>

                            <div class="like-btn car" v-else-if="mode == 'car'" @click="handleBtnFunc('car')">
                                <span>加入购物车</span>
                            </div>

                            <div class="like-btn all" v-else-if="mode == 'all'">
                                <span class="car" @click="handleBtnFunc('car')">加入购物车</span>
                                <span class="bug" @click="handleBtnFunc('buy')">直接购买</span>
                            </div>

                             <div class="like-btn bug" v-else-if="mode == 'sure'" @click="handleBtnFunc('car')">
                                <span >确定</span>
                            </div>
                        </div>
                    </div>
                </div>
            </view>
        </uni-popup>
        <!-- 预览 -->
        <J_previewImage ref="previewImage" :urlsList="styleArr" :vertical="false" @close="closeView"></J_previewImage>
    </div>
</template>

<script>
    import uniPopup from '@/components/uni-popup/uni-popup/uni-popup';
    import J_previewImage from '@/components/J_previewImage/ViewImg';
    import Count from '@/components/Count';
    export default {
        props: ['json', 'styleArr'],
        components: { uniPopup, Count, J_previewImage },
        data() {
            return {
                activeIdx: 0,
                selectOne: {},
                scrollTop: 0,
                countNum: 1,
                mode: 'buy' //buy  car all 三种
            };
        },

        onShow() {},
        mounted() {},
        methods: {
            showFunc(mode) {
                this.mode = mode;

                this.selectOne = this.styleArr[this.activeIdx];
                // this.activeIdx = 0;
                // this.countNum = 1

                this.openFunc();
            },
            //已选中 有数量的
            showInitFunc(mode, id, num) {
                this.mode = 'sure';

                let sIndex = 0;

                this.openFunc();

                this.$nextTick(()=>{

                    this.styleArr.map((item, idx) => {
                        if (item.id == id) {
                            sIndex = idx;
                        }
                    });

                    this.switchGoods(sIndex);

                    this.countNum = num;
                })


                
            },
            openFunc() {
                this.$refs['popup'].open();
            },
            closeBox() {
                this.$refs['popup'].close();
            },
            switchGoods(idx) {
                this.activeIdx = idx;

                this.selectOne = this.styleArr[idx];
            },
            productChange() {},
            clearFunc() {},
            goViewImage() {
                //    let func =  uni.previewImage({
                //         current:this.activeIdx,
                //         indicator:"default",
                //         urls: this.styleArr.map( i => i.fileIdPic ),
                //         success: function(data) {
                //         console.log('选中了第',data);
                //         },
                //         fail: function(err) {
                //             console.log(err);
                //         },
                //          change: function(data) {
                //             console.log('选中了第22222',data);
                //         },
                //     });

                //     console.log('111111111111111',func)

                this.$refs['previewImage'].open(this.activeIdx);
            },
            closeView(e) {
                // console.log('111111111111111',e )

                // this.activeIdx =  e || 0

                this.switchGoods(e);
            },
            handleBtnFunc(type) {
                console.log('哈哈哈哈',type)

                let styleId = this.styleArr[this.activeIdx].id;

                // if(type == 'buy'){
                //    this.$goNext('/pages/supermarket/order/index?styleId='+styleId+'&num='+this.countNum)
                // }

                this.$emit('chooseFinish', { type, styleId, num: this.countNum });
            }
        }
    };
</script>

<style scoped lang="scss">
    .content {
        position: relative;
        background: #fff;
        border-radius: 26rpx 26rpx 0 0;
    }
    .headBox {
        position: relative;
        padding: 20rpx 40rpx 32rpx;
        font-size: 34rpx;
        color: #000;
        line-height: 1.1;
        text-align: center;
        font-weight: bold;
        .close {
            position: absolute;
            right: 0;
            top: 0;
            width: 100rpx;
            text-align: center;
            padding: 30rpx;
            color: #777;
            font-size: 34rpx;
            z-index: 1;
        }
    }
    .popup-body {
        padding: 0 40rpx 0rpx;
        min-height: 50vh;
    }
    .goods_info {
        display: flex;
        // padding-bottom: 40rpx;
        height: 260rpx;
        .imgbox {
            width: 220rpx;
            height: 220rpx;
            border-radius: 10rpx;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .r-box {
            padding-left: 40rpx;
            flex: 1;
            overflow: hidden;
            .price-col {
                padding: 16rpx 0 20rpx;
                .big {
                    font-size: 48rpx;
                }
            }
            .name {
                font-size: 32rpx;
            }
        }
    }
    .tit-head {
        padding: 0rpx 0;
        .b {
            font-size: 30rpx;
        }
        &.flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        &.n{
            padding: 40rpx 0 20rpx;
        }
    }
    .style-list {
        margin: 30rpx 0 0rpx;
        .scroll-Y {
            height: 35vh;
        }
        .item {
            position: relative;
            display: inline-block;
            border: 1px solid #eaeaea;
            background: rgb(252, 252, 252);
            border-radius: 16rpx;
            padding: 6rpx;
            margin-bottom: 10rpx;
            overflow: hidden;
            max-width: 95%;
            &.active {
                border-color: #fd1b1b;
                &::after {
                    position: absolute;
                    z-index: 10;
                    right: -1px;
                    bottom: -1px;
                    content: ' ';
                    color: #fd1b1b;
                    width: 16px;
                    height: 16px;
                    background-image: url('http://192.168.8.10:8700/sex_imgs/app/check.png');
                    background-size: 100% 100%;
                }
            }
        }
        .item-top {
            display: flex;
            align-items: center;
            padding-right: 10px;
            .imgBox {
                flex: 1;
                width: 38px;
                height: 38px;
                img {
                    border-radius: 3px;
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .desc {
                display: flex;
                color: #565656;
            }
        }
    }
    .foot-btn {
        height: 180rpx;
        width: 100%;
    }
    .fixed-bottom {
        height: 160rpx;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #fff;
        padding-bottom: 40rpx;
        .btn-box {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 40rpx 0rpx;
            .like-btn {
                width: 100%;
                height: 86rpx;
                line-height: 86rpx;
                background: rgb(245, 110, 39);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 32rpx;
                font-weight: 500;
                border-radius: 100px;
                overflow: hidden;
            }
            .buy {
                background: rgb(251, 85, 33);
            }
            .car {
                background: rgb(240, 152, 55);
            }
        }
        .all {
            span {
                width: 50%;
                height: 100%;
                text-align: center;
            }
        }
    }
</style>
